<template>
  <el-dialog
    v-model="visible"
    width="340px"
    :show-close="false"
    align-center
    class="location-dialog"
  >
    <div class="dialog-content">
      <el-icon class="location-icon"><Location /></el-icon>
      <h3>请开通定位权限以获得精准服务</h3>
      <p>定位权限将用于为您提供附近的工作/住房。<br>您可在系统设置中随时对其进行设置。<br>注：开通定位权限将获得更好的服务体验。</p>
    </div>
    <template #footer>
      <el-button type="primary" @click="allow">允许定位</el-button>
      <el-button @click="deny">暂不开启</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Location } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: Boolean
})
const emit = defineEmits(['update:modelValue', 'allow', 'deny'])

const visible = ref(props.modelValue)
watch(() => props.modelValue, val => visible.value = val)
watch(visible, val => emit('update:modelValue', val))

function allow() {
  emit('allow')
  visible.value = false
}
function deny() {
  emit('deny')
  visible.value = false
}
</script>

<style scoped>
.location-dialog .dialog-content {
  text-align: center;
  padding: 10px 0 0 0;
}
.location-icon {
  color: #409EFF;
  font-size: 36px;
  margin-bottom: 10px;
}
h3 {
  margin: 10px 0 8px 0;
  font-size: 1.1em;
  font-weight: bold;
}
p {
  color: #666;
  font-size: 0.95em;
  margin: 0 0 10px 0;
  line-height: 1.5;
}
</style> 